웹 프로그래밍

구조 분해 할당 (Destructuring) 구조 분해 할당은 배열이나 객체의 속성을 해제하여 그 값을 각각의 변수에 담을 수 있게 해준다. 위의 객체에서 city값을 불러 올려면 위와 같이 작성 해야 한다. 하지만 여기서 구조 분해 할당을 사용하면 아래와 같은 코드가 된다. 위 코드의 결과 값은 다음과 같다. API 통신 fetch fetch는 ...

index.js 작성 먼저 리액트를 사용하려면 index.js에 설정을 해줘야 한다. 위와 같이 코드를 작성하면 React를 사용 할 수 있게 된다. 여기서 Hello World를 출력해보도록 하겠다.. 이런 식으로 root.render안에 html코드를 작성해주면 된다. > ※ 항상 하나의 박스로 html코드를 감싸주어야 한다. 간단한 예제 이게 C...

Props props는 properties의 줄임말이다. props는 값을 컴포넌트에 전달할 때 사용한다. 사용법 App.js 이렇게 Info 컴포넌트에 name이라고 값을 넘겨주게 되면 Info에서 사용할 수 있다. Info.js 이런식으로 파라미터로 props를 받아 name의 값을 사용하고 싶으면 {props.name}을 사용하면 된다. 조...

map 함수 map()은 반복되는 컴포넌트를 렌더링하기 위해 사용한다. 배열의 자료 갯수만큼 반복한다. 사용법 이런 식으로 사용하면 콘솔창에 이희성, 김준경, 권세원이 차례대로 출력 될 것이고, 마지막에 result 배열을 출력하면 ["이희성", "김준경", "권세원"]이 출력된다. props로 응용 props로 일일히 하나 씩 다 넣기에는 한계가...

UseState란 State는 컴포넌트가 가질 수 있는 상태이다. 사용하는 이유 간단하고 직관적으로 상태를 관리할 수 있다. 객체나 배열 같은 복잡한 상태를 관리할 수 있다. 자동으로 재렌더링이 된다. 사용법 먼저 useState를 사용하려면 import를 받아야 한다. 그 다음 사용할 변수를 선언해야 한다. 이 형태로 사용된다. 예제 위와 같...

User를 State로 만들어 Props로 넘기기 안읽은 메세지 개수 출력하기 위 코드는 안읽은 메세지가 없으면 You're all caught up!을 출력한다. 그리고 메세지가 하나면 You have a unread message을 출력하고 안읽은 메세지가 2개 이상이면 You have 메세지 개수 unread messages를 출력한다.

useEffect란? useEffect는 컴포넌트가 렌더링 될 때 특정 작업을 실행할수 있도록 하는 Hook이다. 장점 함수형 컴포넌트에서도 생명주기 메소드를 사용할 수 있다. 오래걸리는 함수의 경우 UI 렌더링을 블록킹 할 수 있다. 쓰는 이유 자신이 원할 때 원하는 함수를 실행할 수 있다. 특정 코드들이 컴포넌트가 처음 생성될때만 실행되게 바꿀 수...

local storage local sotrage란? 로컬스토리지는 로컬에 저장하는 임시저장소이다. 특징 웹 도메인당 1개씩 생성된다. 새창을 띄워도 도메인만 같으면 동일한 테이터를 공유한다. 다른 도메인 로컬 스토리지에는 접근할 수 없다. 키와 밸류 쌍으로 저장된다. 사용법 로컬스토리지는 이렇게 사용할 수 있다. Firebase Firebas...